<template>
 <div class="todo-footer">
        <label>
          <input type="checkbox" v-model="allcheckedHandle"/>
        </label>
        <span>
          <span>已完成{{allComplete}}</span> / 全部{{todoList.length}}
        </span>
        <button class="btn btn-danger" @click="AlldeleteHandle">清除已完成任务</button>
      </div>
</template>

<script>
import _ from 'lodash'
export default {
name:'Footer',
data(){
    return{
        todoList:[]
    }
},
//初始化的时候,给$bus绑定自定义事件,获取todoList的值
    //我们暂时放在beforeMount中,能让调用事件晚于绑定事件执行
beforeMount(){
    this.$bus.$on('getTodos',(todoList)=>{
        this.todoList=_.cloneDeep(todoList)
    })
},
computed:{
    allComplete(){
        return this.todoList.reduce((p,c)=>{
            return c.done?p+1:p;
        },0)
    },
    allcheckedHandle:{
        get(){
        return this.todoList.every((item)=>item.done) && this.todoList.length!==0
    },
    set(value){
        // console.log(value);
       this.$bus.$emit('newdone',value)
    }
    }
},
methods:{
    AlldeleteHandle(){
       this.$bus.$emit('Alldelete')
    }
}
}
</script>

<style scoped>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}

</style>